<template>
  <div class="pages">
    <el-config-provider :locale="zhCn">
      <el-pagination
    :current-page="page"
    :page-size="pageSize"
    :page-sizes="[5, 10, 15, 20]"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  /></el-config-provider>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// 以下写死 暂时不要变化 直接放在组件内部即可....
const background = ref(false) // 是否显示按钮背景风格
const disabled = ref(false) // 是否禁用分页
const props = withDefaults(defineProps<{
  total: number,
  page: number,
  pageSize: number,
  small?: boolean
}>(), {
  total: 0,
  pageSize: 0,
  page: 0,
  small: true
})
const emits = defineEmits(['changePageSize', 'changePage'])

// 点击一页显示多少天数据 val => pageSize
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
  emits('changePageSize', val)
}
// 点击当前页码获取到 val => page
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
emits('changePage', val)
}
</script>


<style lang='less' scoped>
.pages {
 padding-top: 20px;
 .el-pagination{
      justify-content: center;
    }
}
</style>